﻿@page "/components/treeview"

<DocsPage>
    <DocsPageHeader Title="TreeView">
        <Description>Easily customizable tree view.</Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Simple Tree View">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewSimpleExample />
            </SectionContent>
            <SectionSource Code="TreeViewSimpleExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Highlight TreeItem">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewHoverExample />
            </SectionContent>
            <SectionSource Code="TreeViewHoverExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Activate TreeItem on click">
                <Description>Use <CodeInline>@@bind-Activated</CodeInline> on TreeViewItem to bind a single item.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewActivateExample />
            </SectionContent>
            <SectionSource Code="TreeViewActivateExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Selectable items">
                <Description>Use <CodeInline>@@bind-Selected</CodeInline> on TreeViewItem to bind a single item.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewSelectExample />
            </SectionContent>
            <SectionSource Code="TreeViewSelectExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Expand-on-click">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewExpandOnClickExample />
            </SectionContent>
            <SectionSource Code="TreeViewExpandOnClickExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="TreeItem with icons">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewIconExample />
            </SectionContent>
            <SectionSource Code="TreeViewIconExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Dense TreeView">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewDenseExample />
            </SectionContent>
            <SectionSource Code="TreeViewDenseExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="TreeViewItemTemplate">
                <Description>This example shows how to use ItemTemplate to automatically build the tree items according to a hierarchical data structure.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewItemTemplateExample />
            </SectionContent>
            <SectionSource Code="TreeViewItemTemplateExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Load data on demand">
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewServerExample />
            </SectionContent>
            <SectionSource Code="TreeViewServerExample" GitHubFolderName="Tree" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Custom Tree">
                <Description>
                    When the <CodeInline>Content</CodeInline> property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own.
                    Use the <CodeInline>Height</CodeInline> or <CodeInline>MaxHeight</CodeInline> parameters to scroll the treeview.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <TreeViewCustomExample />
            </SectionContent>
            <SectionSource Code="TreeViewCustomExample" GitHubFolderName="Tree" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
